<template>
	<view class="content">
		<view class="herder">
			<view class="username">
			<image class="head" :src="userinfo.avatar" mode="widthFix" @click="previewImage"></image>
				<text>{{userinfo.nickname}}</text>
				<image @click="userbtn" style="width: 34rpx;height: 34rpx;margin-left: 8rpx;" src="../../static/icon/Vector.png"></image>
			</view>
			<view class="tool">
				<!-- <view class="notice">
					<view class="dian"></view>
					<view class="iconfont icon-tongzhi"></view>
				</view> -->
				<navigator url="../../page_my/my-setup/index" class="iconfont icon-shezhi"></navigator>
			</view>
		</view>
		<view class="moneybox">
			<view class="certificate">
				<view class="item">
					<view class="left">没有可用优惠券</view>
					<view class="iconfont icon-jinrujiantouxiao yuan"></view>
				</view>
			</view>
			<view style="color: #fff;margin:16rpx 0;">余额</view>
			<view style="color: #fff;font-size: 40rpx;"><text style="font-size: 24rpx;">￥</text>0.00</view>
			<view class="wallet" @click="wallet">
				<view class="yuan">￥</view>
				<text>钱包</text>
				<text class="iconfont icon-jinrujiantouxiao"></text>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="goods">
			<view style="font-size: 36rpx;font-weight: 600;">我的订单</view>
			<view class="title">
				<view class="title-item" v-for="(item,index) in title" :key="index" @click="orderjump(index+1)">
					<image :src="item.url"></image>
					<text>{{item.shopp}}</text>
				</view>
			</view>
		</view>
		<!-- 功能跳转项 -->
		<view class="Jump">
		<u-cell-group :border='false'>
			<u-cell :border='false' isLink v-for="(item,index) in jump" :key="index" :url="item.src">
				<view class="u-slot-title" slot="title">
					<image :src="item.url"></image>
					<text style="font-weight: 500;">{{item.topic}}</text>
				</view>
			</u-cell>
		</u-cell-group>
		</view>
		<u-toast ref="mytoast"></u-toast>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				title:[
					{url:'../../static/icon/goods_1.png',shopp:'待付款'},
					{url:'../../static/icon/goods_2.png',shopp:'待发货'},
					{url:'../../static/icon/goods_4.png',shopp:'待收货'},
					{url:'../../static/icon/goods_3.png',shopp:'退款/售后'},
				],
				jump:[
					// {url:'../../static/icon/Frame_2.png',topic:'我的卡券'},
					{url:'../../static/icon/Frame_3.png',topic:'我的地址',src:'/page_my/my-address/index'},
					// {url:'../../static/icon/Frame_4.png',topic:'团队介绍'},
					{url:'../../static/icon/Frame_5.png',topic:'商家入驻',src:'/page_payment/merchantsettlement'},
					{url:'../../static/icon/Frame_6.png',topic:'隐私政策',src:'/page_my/privacypact?type=3'},
					{url:'../../static/icon/Frame_7.png',topic:'意见反馈',src:'/page_payment/feedback'}
					]
			}
		},
		computed:{
			...mapState(['token','userinfo'])
		},
		methods:{
			...mapMutations(['setuser']),
		   wallet(){
			   uni.navigateTo({
			   	url:'/page_my/my-wallet'
			   })
		   },
		   previewImage(){
			    console.log(this.userinfo);
			    uni.previewImage({
			           urls: [this.userinfo.avatar]
			         });
		   },
		   orderjump(num){
			   uni.navigateTo({
			   	url:`/page_allorders/index?num=${num}&state=${num*10}`
			   })
		   },
		   userbtn(){
			   if(this.token){
				   uni.navigateTo({
				   	url:'/page_my/my-account'
				   })
			   }else{
				  this.$refs.mytoast.show({
				    message:"请先登录哦~"
				  })
			   }
		   },
		   async userapi(){
			   const res = await http({
				   url:'/user/info',
			   })
			   this.setuser(res.data)
		   }
		},
		onShow() {
		  this.$bus.$on('upinfo', params => {
		  this.userapi()
		  })
		},
		onLoad() {
		  this.userapi()
		}
	}
</script>

<style lang="scss">
	.yuan{
		font-size: 22rpx;
		width: 42rpx;
		height: 42rpx;
		border-radius: 50%;
		background-color:#024A1B;
		text-align: center;
		line-height: 42rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		.herder{
			margin-top: 170rpx;
			display: flex;
			padding: 0 40rpx;
			justify-content: space-between;
			align-items: center;
			width: 670rpx;
			.username{
				font-size: 32rpx;
				text-align: left;
				display: flex;
				align-items: center;
				.head{
					width: 153rpx;
					height: 153rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
			.tool{
				display: flex;
				.notice{
					position: relative;
					.dian{
						width: 10rpx;
						height: 10rpx;
						background-color: red;
						border-radius: 50%;
						position: absolute;
						right: 6rpx;
						top: 8rpx;
					}
					.icon-tongzhi{
						font-size: 36rpx;
					}
				}
				.icon-shezhi{
					font-size: 38rpx;
					margin-left: 50rpx;
				}
			}
		}
		.moneybox{
			position: relative;
			box-sizing: border-box;
			margin-top: 30rpx;
			padding:40rpx 60rpx ;
			width: 670rpx;
			height: 320rpx;
			border-radius: 60rpx;
			background-color:#333333;
			.certificate{
				display: flex;
				justify-content: space-between;
				.item{
					box-sizing: border-box;
					display: flex;
					padding: 20rpx 20rpx 6rpx 20rpx;
					justify-content: space-between;
					align-items: center;
					width: 260rpx;
					height: 130rpx;
					background-image: url('~@/static/Subtract.png');
					background-size:260rpx 130rpx;
					.left{
						font-size: 22rpx;
					}
				}
			}
			.wallet{
			position: absolute;
			width: 152rpx;
			height: 60rpx;
			bottom: 50rpx;
			right: 0;
			border-radius: 40rpx 0rpx 0rpx 40rpx;
			background-color: #025E21;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10rpx;
			padding-right: 18rpx;
			font-size: 24rpx;
			.icon-jinrujiantouxiao{
				font-size: 24rpx;
			}
			}
		}
		.goods{
			margin-top: 80rpx;
			width: 670rpx;
			height: 190rpx;
			.title{
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 40rpx;
				.title-item{
					display: flex;
					align-items: center;
					flex-direction: column;
					font-size: 28rpx;
					color: #666666;
					image{
						width: 68rpx;
						height: 68rpx;
						margin-bottom: 16rpx;
					}
				}
			}
		}
		.Jump{
		    width: 720rpx;
			margin-top: 40rpx;
			.u-slot-title{
				display: flex;
				align-items: center;
				image{
					width:44rpx;
					height:44rpx;
					margin-right: 16rpx;
				}
			}
		}
	}
</style>
